<template xmlns:el-table="http://www.w3.org/1999/html">
  <div class="common-layout">
    <el-container>
      <el-header style="padding: 0;margin: 0">
        <el-affix :offset="0">
          <div id="headDiv">
            <div>
              <el-button type="warning" size="large" style="margin-left: 40px" @click="home()" round>
                <el-icon>
                  <House/>
                </el-icon>
                首页
              </el-button>
            </div>
            <div :hidden="unLogin" style="margin-right: 20px">
              <span style="color: #626262;margin-right: 20px">您好！请登录</span>
              <el-button type="primary" size="large" @click="$router.push('newLogin')" round>登录</el-button>
              <!--              <el-button size="large" @click="$router.push('logon')">注册</el-button>-->
              <el-button size="large" @click="$router.push('register')" round>快速注册</el-button>
            </div>
            <div :hidden="userLogin">
              <span style="color: #626262;margin-right: 20px">您好! 请购物！</span>
              <el-button type="primary" size="large" @click="$router.push('goods')" round>全部商品</el-button>
              <el-button type="primary" size="large" @click="toShoppingCar()" round>购物车</el-button>
              <el-button size="large" type="primary" @click="toOrder()" round>个人订单</el-button>
              <el-button size="large" type="primary" @click="$router.push('user')" round>个人信息</el-button>
              <el-button size="large" type="primary" @click="$router.push('returnOrder')" round>
                退款订单管理
              </el-button>
              <el-button size="large" type="primary" @click="$router.push('userMoney')" round>预存款管理</el-button>
              <el-button size="large" type="success" @click="logon()" round>补全注册</el-button>
              <el-button size="large" type="primary" @click="refresh()" round>刷新权限</el-button>
              <el-button size="large" type="danger" style="margin-right: 20px" @click="exitUser()" round>退出登录
              </el-button>
            </div>
          </div>
        </el-affix>
      </el-header>
      <div style="font-size: 30px;margin: 20px 200px">
        <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> |
          朗沃商城</a>
      </div>
      <div
          style="width: 100%;background-image: url('孤勇者.png');height: 400px;border-bottom-left-radius: 200px;border-bottom-right-radius: 200px;background-size: 100%">
        <el-image src="img_2.png"
                  style="width: 1200px;height: 400px;border: 20px white solid;margin-top: 30px;margin-left: 323px;"></el-image>
      </div>
      <el-main style="display: flex;justify-content: center;padding: 0;margin: 0">
        <div id="bodyDiv">
          <div style="width: 100%;display: flex;justify-content: center">
            <el-image src="img_1.png" style="border-top: 40px white solid"></el-image>
          </div>
          <div style="margin: 30px auto;text-align: center;margin-top: 50px">
            <el-carousel :interval="6000" type="card" height="472px">
              <el-carousel-item v-for="item in 5" :key="item" style="width: 846px;">
                <h3 text="2xl" justify="center" style=""></h3>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
              style="height: 60px;display: flex;justify-content: space-between;align-items: center;border-top:1px #101010 solid">
            <div class="block">
              <el-cascader
                  v-model="value"
                  :options="options"
                  :props="{ label:'typeName',value:'typeNo',children:'typeVos',expandTrigger: 'hover' }"
                  placeholder="请选择商品类型"
                  @change="handleChange()"></el-cascader>
              <el-button type="primary" size="large" @click="cleanType()" round>清除类型</el-button>
            </div>
          </div>
          <div>
            <basic-container>
              <el-row>
                <el-col v-for="(product, index) in productList" :key="product" :span="5" :offset="index > 0 ? 1:1"
                        style="margin-left: 45px">
                  <el-card :body-style="{ padding: '0 19px'}"
                           style="background-color: white;color: #181818;margin-top: 20px;height: 450px">
                    <el-image :src="actionUrl+product.goodsPic" style="width: 250px;height: 250px;margin-top: 10px">
                    </el-image>
                    <div>
                      <div>
                        <p style="color:#2f2f2f;margin: 0;font-size: 20px">产品名称：{{ product.goodsName }}</p>
                        <h3 style="margin: 5px;color: #c72121">价格:{{ product.sellPrice }}</h3>
                        <h5 style="margin: 5px;color: gray"><span>类型:{{ product.goodsType }}</span><span
                            style="margin-left:60px">折扣:{{ product.discount }}</span></h5>
                        <h5 style="margin: 5px;color: gray"><span>描述:{{ product.des }}</span></h5>
                        <div style="margin-top: 10px;display: flex;justify-content: space-between">
                          <el-button type="primary" @click="buyProduct(product)">
                            查看详情
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <div id="pagination">
                <el-pagination
                    style="background-color: white"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[12,24,36,48]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalCount">
                </el-pagination>
              </div>
            </basic-container>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  data() {
    return {
      value: [],
      options: [],
      //分页
      page: {
        //每页显示条数
        pageSize: 12,
        //当前页码
        currentPage: 1,
        //总记录数
        totalCount: 0,
      },
      userToken: "",
      unLogin: false,
      userLogin: false,
      productList: [],
      actionUrl: "/picture/face/",
      product: {},
      productType: "",
      showCheckout: false,
      showShoppingCar: false,
      config: {},
    }
  },
  created() {
    let user = sessionStorage.getItem("user")
    if (user == null) {
      this.$router.push("newLogin")
    }
    this.config = {
      headers: {
        'token': this.userToken
      }
    };
    this.queryUser();
    this.selectAll();
    this.queryType();
  },
  methods: {
    cleanType(){
      this.value=[]
      this.selectAll()
    },
    queryType(){
      axios.get("/api/goods/queryType",null).then(res=>{
        console.log(res.data)
        this.options=res.data
      })
    },
    handleChange() {
      console.log(this.value);
      let param = new URLSearchParams();
      param.append("typeNo",this.value[this.value.length-1])
      param.append("curPage", this.page.currentPage);
      param.append("pageSize", this.page.pageSize);
      console.log(param)
      axios.post("/api/goods/queryGoodsByTypeAndDiscount", param).then(res => {
        console.log(res.data)
        this.productList = res.data.records;
        this.page.totalCount = res.data.total;
      })
    },
    selectAll() {
      let param = new URLSearchParams();
      param.append("curPage", this.page.currentPage);
      param.append("pageSize", this.page.pageSize);
      console.log(param)
      axios.post("/api/goods/queryGoodsByTypeAndDiscount", param).then(res => {
        console.log(111)
        console.log(res.data)
        this.productList = res.data.records;
        this.page.totalCount = res.data.total;
      })
    },
    toShoppingCar(){
      console.log(sessionStorage.getItem("user"))
      let str = sessionStorage.getItem("user")
      let user = JSON.parse(str)
      console.log(user)
      console.log(user.auditStatus)
      if(user.auditStatus===1){
        this.$router.push('shoppingCar')
      }else{
        ElMessage.error("用户资质还未通过")
      }
    },
    toOrder(){
      let str = sessionStorage.getItem("user")
      let user = JSON.parse(str)
      console.log(user)
      if(user.auditStatus===1){
        this.$router.push('order')
      }else{
        ElMessage.error("用户资质还未通过")
      }
    },
    logon() {
      console.log(JSON.parse(sessionStorage.getItem('user')).auditStatus)
      if (JSON.parse(sessionStorage.getItem('user')).auditStatus!==1){
        this.$router.push('logon')
      }
      else{
        ElMessage.success("已经补全注册")
      }
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      //设置每页显示条数
      this.page.pageSize = val;
      // 查询所有商品
      this.selectAll();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      //重新设置当前页
      this.page.currentPage = val;
      // 查询所有商品
      this.selectAll();
    },
    //选择产品类型
    changeType() {
    },
    //返回首页
    home() {
      this.$router.push("app")
    },
    //查询用户
    queryUser() {
      let userToken = sessionStorage.getItem("userToken")
      if (userToken == null) {
        this.unLogin = false
        this.userLogin = true
      } else {
        this.userToken = userToken
        this.unLogin = true
        this.userLogin = false
      }
    },
    //退出登录
    exitUser() {
      sessionStorage.clear();
      this.queryUser();
    },
    //加入购物车
    buyProduct(product) {
      let str = sessionStorage.getItem("user")
      let user = JSON.parse(str)
      console.log(user)
      if(user.auditStatus!==1){
        ElMessage.error("用户资质还未通过")
        return
      }else {
        this.product = product
        console.log(product)
        //let user = sessionStorage.getItem('user');
        window.open("http://162.14.66.174:7001/discount/"+product.goodsNo+".html?userId="+sessionStorage.getItem("userId"))
        //window.open("http://162.14.66.174:7001/discount/005.html",user)
      }
    },
    //关闭dialog
    closeDiv() {
      this.product = {}
      this.showShoppingCar = false
      this.showCheckout = false
    },
    //刷新用户权限
    refresh(){
      axios.get('api/userDetail/refreshUser?userNo='+sessionStorage.getItem('userNo')).then(p=>{
        if (p.data.code===200){
          console.log(p.data.data)
          sessionStorage.setItem('user',p.data.data)
          sessionStorage.setItem("userDiscount", p.data.data.userDiscount);
          ElMessage.success("刷新成功")
        }
        else{
          ElMessage.error("刷新失败")
        }

      })
    },
  }
}
</script>
<style>
#headDiv {
  width: 100%;
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 10px gray;
}

#bodyDiv {
  width: 1400px;
  padding: 20px;
  margin: 0;
  /*box-shadow: 0 0 10px gray;
  background-color: white;*/
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.8;
}

.el-carousel__item:nth-child(3) {
  background-image: url("big1.png");
  border: 1px rgb(255, 115, 0) solid;
  border-radius: 20px;
  box-shadow: 0 0 10px gray;
}

.el-carousel__item:nth-child(4) {
  background-image: url("big2.jpg");
  border: 1px rgb(255, 115, 0) solid;
  border-radius: 20px;
  box-shadow: 0 0 10px gray;
}

.el-carousel__item:nth-child(5) {
  background-image: url("big3.jpg");
  border: 1px rgb(255, 115, 0) solid;
  border-radius: 20px;
  box-shadow: 0 0 10px gray;
}

.el-carousel__item:nth-child(6) {
  background-image: url("big4.png");
  border: 1px rgb(255, 115, 0) solid;
  border-radius: 20px;
  box-shadow: 0 0 10px gray;
}

.el-carousel__item:nth-child(7) {
  background-image: url("big5.png");
  border: 1px rgb(255, 115, 0) solid;
  border-radius: 20px;
  box-shadow: 0 0 10px gray;
}

.bill {
  margin: 0 10px;
  margin-top: 20px;
}

.el-pagination {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

</style>
